<!DOCTYPE html>  <!--  除非声明为 !Document -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 对齐</title>
    <style type="text/css">


        /* css 中可以使用多种属性来水平对齐元素
           块元素指的是占据全部可用宽度的元素,并且在其前后都会换行
           eg: <h1>   <p> <div>
           第一种: 可通过将左和右外边距设置为 "auto",来对齐块元素
           注释: 除非已经声明了 !Document 否则 margin:auto 在IE8和更早的版本中是无效的
         */
        .center{
            margin: auto;
            width: 70%;
            background-color: #b0e0e6;
        }
        /* 我们使用position 属性进行左和右对齐
           绝对定位
         */
        .right{
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #b0e0e6;
        }

        body{
            margin: 0;
            padding: 0;
        }

        .container{
            position: relative;
            width: 100%;
        }

        .rightTwo{
            position: absolute;
            right: 0px;
            width: 300px;
            background-color: #7a991a;
        }

        /*  使用float 属性来进行左对齐 或者 右对齐*/
        .rightThree{
            float: right;
            width: 1500px;
            background-color: #8235bd;
        }

    </style>
</head>
<body>
    <div class="center">
        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
        <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
    </div>

    <p><b>注释：</b>除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p>

    <div class="right">
        <p>这是一个向右段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
        <p>这是一个向右段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
    </div>

    <hr/>
      跨浏览器兼容性问题 不同的浏览器对于 body的 margin 和 padding 是不同我们这样设置 可以修改兼容性的问题
    <div class="container">
        <div class="rightTwo">
            <p>第一次 这是一个向右段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
            <p>第一次 这是一个向右段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
        </div>
    </div>
    <p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>

    <!-- 使用 -->
    <div class="rightThree">
        <p>第二次 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
        <p>第二次 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
    </div>


</body>
</html>